feat(fab): add Floating Action Button feature with Stack, Radial and Morph variants#17
feat(fab): add Floating Action Button feature with Stack, Radial and Morph variants#17Vinnih-1 wants to merge 19 commits intodeveloperchunk:mainfrom
Conversation
|
Hey @Vinnih-1 👋 Thank you so much for putting your efforts into adding a new component, I know it takes a lot of effort to do that! Please spare me some time, so that I can review it! Thanks |
|
Hey @Vinnih-1 👋 Thank you so much for the PR, the custom Floating Action Buttons look really great! 🙌 We truly appreciate the effort and thought you’ve put into this. I had a chance to review it and wanted to share a few suggestions that could help us take this even further:
These improvements will help us maintain a high standard for the library and make it more powerful for developers. Thanks again for your contribution, we genuinely value it a lot and are looking forward to your thoughts and updates! |
|
Hey @developerchunk I really appreciate your feedback. It's helpful and gives me a clear direction to move forward. I'll start working on these improvements shortly and update the PR as I make progress. Feel free to share any other references or ideas in the meantime. I'm open to feedback throughout the process! Thanks again for taking the time to review this so carefully! |
|
Hey @developerchunk ! It's me again. After reviewing your suggestions, I decided to overhaul the implementation to ensure this feature is as flexible and useful as possible for developers, giving them full control over how to use it. Here are the key changes: AnimationsThe initial version was quite limited. It used a single class for all animations, and the main FAB was locked into a hardcoded rotation. All items also animated simultaneously. I have now introduced new attributes to allow for deep customization: val enterOrder: StaggerOrder = StaggerOrder.FIFO,
val exitOrder: StaggerOrder = StaggerOrder.FILOThese attributes in the We now have two specialized transition classes: FabItemTransitionThis class is responsible for handling item animations during expansion and collapse. It allows developers to combine transitions intuitively using the + operator: // Combine animations with custom specs using the + operator
enterTransition = FabItemTransition.Scale() + FabItemTransition.Fade() + FabItemTransition.Rotate(-360f),
exitTransition = FabItemTransition.Scale() + FabItemTransition.Fade() + FabItemTransition.Rotate(0f),FabButtonTransitionThis works similarly to // Mixing multiple transitions for the main button
buttonEnterTransition = FabButtonTransition.Rotate(135f) + FabButtonTransition.Scale(0.9f) + FabButtonTransition.SlideTo(y = (-8).dp),
buttonExitTransition = FabButtonTransition.Rotate(0f) + FabButtonTransition.Scale(1f) + FabButtonTransition.SlideTo(y = 0.dp)Flexibility & ArchitectureTo better align with JetCo's patterns, I refactored the FAB variants:
Modern InteractionRegarding the implementation of screen interactions: I realized this is most effective with the Variants Visual Guide
|
|
Love the changes @Vinnih-1 ✨ This looks amazing, really appreciate the level of customizability you’ve added. Thank you so much for the effort here, it truly shows 🙌 Just one small suggestion: the animation currently feels a bit sudden. You might want to explore using spring or keyframesWithSplines instead of tween/keyframes. These provide a smoother start and end with a more natural motion in between, which aligns well with modern animation standards. You can refer to this for more details: Everything else looks great! I’ll be happy to merge this once the animation is updated. |




Hey! It's me again.
Since my last pull request, I've been putting some efforts to create a Floating Action Button feature for JetCo. This pull request introduces three variants of FAB. For now I've created this feature only for the Android platform. I would like your review. Once reviewed, I can extend this component for KMP and do the next steps.
What's included
Three fully animated FAB variants built on a shared config system:
StackFloatingActionButton: expands sub-items linearly in three directions: TOP, START or END. Supports text + icon combinations on the main button.
RadialFloatingActionButton: spreads sub-items in a configurable arc.
MorphFloatingActionButton: morphs the FAB into an expandable card grid with a title header, close button.
Variants